<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <div
      class="ant-pro-checkcard ant-pro-checkcard-bordered"
    >
      <div
        class="ant-pro-checkcard-content"
      >
        <div
          class="ant-pro-checkcard-detail"
        >
          <div
            class="ant-pro-checkcard-header"
          >
            <div
              class="ant-pro-checkcard-header-left"
            >
              <div
                class="ant-pro-checkcard-title"
              >
                <div
                  style="display: flex; align-items: center;"
                >
                  <span
                    aria-label="appstore"
                    class="anticon anticon-appstore"
                    role="img"
                  >
                    <svg
                      aria-hidden="true"
                      data-icon="appstore"
                      fill="currentColor"
                      focusable="false"
                      height="1em"
                      viewBox="64 64 896 896"
                      width="1em"
                    >
                      <path
                        d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
                      />
                    </svg>
                  </span>
                  <span
                    style="margin-inline-end: 8px; margin-inline-start: 8px;"
                  >
                    示例
                  </span>
                  <span
                    class="ant-tag ant-tag-blue"
                  >
                    blue
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div
            class="ant-pro-checkcard-description"
          >
            选择一个由流程编排提供的典型用户案例，可以从中学习到流程编排很多设计理念
          </div>
        </div>
      </div>
    </div>
    <div
      class="ant-pro-checkcard ant-pro-checkcard-bordered"
    >
      <div
        class="ant-pro-checkcard-content"
      >
        <div
          class="ant-pro-checkcard-detail"
        >
          <div
            class="ant-pro-checkcard-header"
          >
            <div
              class="ant-pro-checkcard-header-left"
            >
              <div
                class="ant-pro-checkcard-title ant-pro-checkcard-title-with-ellipsis"
              >
                标题内容过长会自动进行省略，标题内容过长会自动进行省略
              </div>
            </div>
          </div>
          <div
            class="ant-pro-checkcard-description"
          >
            选择一个由流程编排提供的典型用户案例，可以从中学习到流程编排很多设计理念
          </div>
        </div>
      </div>
    </div>
    <div
      style="margin-top: 20px; padding: 20px; background-color: #f5f5f5; border-radius: 6px;"
    >
      <h4>
        CheckCard Title Props 说明：
      </h4>
      <ul>
        <li>
          <strong>
            title
          </strong>
          : 卡片标题，可以是字符串或 React 节点
        </li>
        <li>
          <strong>
            description
          </strong>
          : 卡片描述信息
        </li>
      </ul>
      <h4>
        Title 使用方式：
      </h4>
      <ul>
        <li>
          <strong>
            字符串
          </strong>
          : 直接传入字符串，过长会自动省略
        </li>
        <li>
          <strong>
            组件
          </strong>
          : 传入 React 节点，可以包含图标、标签等复杂内容
        </li>
      </ul>
      <h4>
        复杂 Title 示例：
      </h4>
      <ul>
        <li>
          <strong>
            图标
          </strong>
          : 使用 AppstoreOutlined 等 Ant Design 图标
        </li>
        <li>
          <strong>
            文本
          </strong>
          : 使用 span 标签包装文本内容
        </li>
        <li>
          <strong>
            标签
          </strong>
          : 使用 Tag 组件添加状态标识
        </li>
        <li>
          <strong>
            布局
          </strong>
          : 使用 flexbox 布局对齐多个元素
        </li>
      </ul>
      <h4>
        样式说明：
      </h4>
      <ul>
        <li>
          <strong>
            自动省略
          </strong>
          : 字符串形式的 title 过长时会自动省略
        </li>
        <li>
          <strong>
            自定义样式
          </strong>
          : 组件形式可以完全控制样式和布局
        </li>
        <li>
          <strong>
            响应式
          </strong>
          : 支持响应式布局，在不同屏幕尺寸下自适应
        </li>
      </ul>
    </div>
  </div>
</DocumentFragment>